import React from 'react'
import { Table,Icon,Modal,Popconfirm,Form,Input,Row,Col,DatePicker,Button,Message,Select} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import api from '../../../api/adSaleManage';
const { RangePicker } = DatePicker;
import moment from 'moment';

import PanelBox from '../../../components/PanelBox';
import {jsonToTree} from '../../../utils/tools';
import AreaCascader from '../../Cascader/AreaCascader';

import '../../../style/antd-theme.less';

class SelectAdSale extends React.Component {
  state = {
    data: [],
    pagination: {
      pageSize:8,
      pageNum:1,
    },
    loading: false, 
    rowRecord:'',
    areaId:'',
  };
  columns = [{
    title: '套餐名称',
    dataIndex: 'name',
  },{
    title: '精准/轮播广告单价(1天/1硬件)',
    dataIndex: 'accuratePrice',
    width: '10%',
    render: (text, record) => (
      <span>精准： {record.accuratePrice}(元) / 轮播：{record.turnPrice} (元)</span>
    ),
  },{
    title: '购买单位(天)',
    dataIndex: 'days',
    width: '8%',
  },{
    title: '联系人',
    dataIndex: 'contacts',
    width: '16%',
    render: (text, record) => (
      <span> {record.contacts}({record.phone})</span>
    ),
  
  },{
    title: '关联硬件数',
    dataIndex: 'hardNum',
    width: '10%',
  },{
    title: '添加日期',
    dataIndex: 'createDate',
    width: '15%',
  },
   {
    title: '操作',
    key: 'action',
    width: '8%',
    render: (text, record) => (
      <span>
       { record.allowBuy  == 1 ? <a href="javascript:void(0)" onClick={this.selected.bind(this, record)}>选择</a> :''}
      </span>
    ),
  }
];
fetch=(params)=>{
    const{queryType}  = this.props;
    params.queryType=queryType;//查询类型 1我的 2别人的  默认1
    this.setState({ loading: true });
    api.get('/adSaleManage/getSelectAll', { params}).then((data) => {
      const _data = data.data;
      this.setState({
        loading: false,
        data: _data,
      });
    });

}
  componentDidMount = () =>{
    let params={};
    const{userSession,queryType}  = this.props;
    this.setState({queryType});
    if(queryType==2 && userSession){
      params.areaId =userSession.officeAreaId;
      this.setState({areaId: userSession.officeAreaId});
    }
    this.fetch(params);
  }

  selected = (record, event) => {
    const { selectAdvSaleParam ,close} = this.props;
    selectAdvSaleParam({ id:record.id,name:record.name,days:record.days});
  }
  

  close = () => {
    this.setState({
      isOpenModal: false,
      clearForm: true,
    });
  }

  render() {
    return (
      <div>
        <SearchForm searchCostState={this.state} goSearch={this.fetch}/>
        <PanelBox>
          <Table columns={this.columns}  dataSource={this.state.data}  loading={this.state.loading}  rowKey={'id'}
          pagination={false}
          />
        </PanelBox>
      </div>
    );
  }
}

const SelectAdSaleForm= Form.create()(SelectAdSale);
export default SelectAdSaleForm

    class SearchsForm extends React.Component {
      state={
        areaId:'',
      }
      // 开始搜索
      goSearch = (e) => {
        let params=this.props.form.getFieldsValue().search;
        let _this = this.props;
        if(params.areaId && params.areaId.length>0){
          params.areaId=params.areaId[params.areaId.length-1];
        }else{
          delete params.areaId;
        }
        _this.goSearch(params);
     
      }

      srearchStyle = {
        labelCol: { span: 8},
        wrapperCol: { span: 16 },
      };
     
      render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = this.srearchStyle;
        const states=this.props.searchCostState;
        const  areaId  = states.areaId;
        const search = {
          name: "name",
        };
        return <Form onSubmit={this.goSearch} layout="inline" style={{marginBottom:'10px'}}>
          <FormItem {...formItemLayout} label="套餐名称" style={{marginRight:0,marginBottom:'10px'}}>
            {getFieldDecorator('search.name')(
              <Input type="text" placeholder="请输入套餐名称"/>
            )}
          </FormItem>
          {states.queryType && states.queryType==2?
          <FormItem
            {...formItemLayout}
            label="所属区域"
          >
            {getFieldDecorator('search.areaId', {
              initialValue: areaId ? areaId : ''
            })(
              <AreaCascader />
              )}
          </FormItem>:''}
          <FormItem>
            <Button type="primary" icon="search" htmlType="submit">搜索</Button>
          </FormItem> 
         
        </Form>
      }
    }
    const SearchForm = Form.create({})(SearchsForm);